<template>
  <div class="appdownload">
    <TopSubfield>我是顶部</TopSubfield>
    <div class="introduce-section mobile header">
      <div class="introduce-container">
        <div class="introduce-section-text">
          <h1>享七商家端 | 手机端</h1>
          <p>用手机在网上开餐厅，随时随地接订单。</p>
          <p>支持 iOS8 及安卓 4.0 以上系统</p>
          <div class="download">
            <img src="../../../../static/images/xiangqiSj.jpg" alt="下载二维码">
            <ul>
              <li>
                <a
                  href="https://a.app.qq.com/o/simple.jsp?pkgname=io.dcloud.H53DA2BA2&fromcase=40003"
                  target="_blank"
                >
                  <img src="../../../../static/images/android.png" alt="Android下载">
                  <span>Android下载</span>
                </a>
              </li>
              <li>
                <a href="https://itunes.apple.com/cn/app/id1387428528?mt=8">
                  <img src="../../../../static/images/ios.png" alt="iOS下载">
                  <span>iOS下载</span>
                </a>
              </li>
            </ul>
            <p class>请扫描二维码进行下载</p>
          </div>
        </div>
        <img
          class="introduce-section-image"
          src="../../../../static/images/mobile01.png"
          alt="饿了么商家版 | 手机端"
        >
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import TopSubfield from "@/components/top/TopSubfield";
import Footer from "@/components/bottom/footer";
export default {
  name: "appdownload",
  components: {
    TopSubfield,
    Footer
  },
  data() {
    return {};
  }
};
</script>

<style lang="less" scoped>
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: MicrosoftYaHei, Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-y: auto;
  color: #333;
}
.appdownload {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
}
.introduce-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 auto;
  width: 80%;
  // border: 1px solid red;
  height: 100%;
}
.introduce-section .introduce-section-text > h1,
.introduce-section .introduce-section-text > h2 {
  margin: 0;
  line-height: 56px;
  font-size: 38px;
}
.introduce-section-image {
  padding-top: 148px;
  width: 550px;
}
.introduce-section {
  width: 100%;
  height: 76%;
  .introduce-section-text {
    & > h2 {
      font-weight: 400;
    }
    & > p {
      margin: 0;
      line-height: 25px;
      font-size: 18px;
      color: #666;
    }
  }
  &.header {
    color: #fff;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#0091ea),
        to(#0091ea)
      ),
      -webkit-gradient(linear, left top, left bottom, from(#0074f6), to(#0885ea));
    background-image: linear-gradient(#0091ea, #0091ea),
      linear-gradient(to bottom, #0074f6, #0885ea);
    .introduce-section-text {
      & > p {
        font-size: 16px;
        line-height: 22px;
        color: #fff;
      }
    }
    &.mobile {
      .introduce-section-text {
        padding-left: 30px;
        & > h1 {
          margin-bottom: 6px;
        }
        & > p {
          &:not(:last-child) {
            margin-bottom: 10px;
          }
        }
        .download {
          position: relative;
          margin-top: 40px;
          & > img {
            display: inline-block;
            padding: 5px;
            width: 164px;
            border-radius: 3px;
            background-color: #fff;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            vertical-align: middle;
          }
          & > ul {
            display: inline-block;
            margin: 0 0 0 40px;
            padding: 0;
            list-style: none;
            vertical-align: middle;
            & > li {
              &:not(:last-child) {
                margin-bottom: 64px;
              }
              & > a {
                display: block;
                padding: 13px 20px;
                color: #fff;
                border-radius: 25px;
                border: 1px solid #fff;
                text-decoration: none;
                & > img {
                  display: inline-block;
                  width: 20px;
                  vertical-align: middle;
                }
                & > span {
                  display: inline-block;
                  vertical-align: middle;
                }
              }
            }
          }
          & > p {
            position: absolute;
            bottom: 4px;
            right: -100px;
            margin: 0;
            padding: 10px;
            color: #333;
            border-radius: 3px;
            background: #fff;
            opacity: 0;
            -webkit-transition: opacity 0.3s ease-in-out;
            transition: opacity 0.3s ease-in-out;
            &.show {
              opacity: 1;
            }
            &:after {
              position: absolute;
              top: 50%;
              right: 100%;
              margin-top: -7px;
              height: 0;
              width: 0;
              border: solid transparent;
              border-width: 7px;
              border-color: rgba(255, 255, 255, 0);
              border-right-color: #fff;
              pointer-events: none;
              content: "";
            }
          }
        }
      }
    }
  }
  &.mobile {
    &.filled {
      background-color: #f5f5f5;
      .introduce-container {
        -webkit-box-pack: initial;
        -ms-flex-pack: initial;
        justify-content: initial;
      }
    }
    .introduce-section-text {
      padding-left: 50px;
      & > h2 {
        margin-bottom: 27px;
      }
    }
  }
}
</style>
